<template>
  <div class="feedback-page-wrap">
    <div class="feedback-left" ref="fl" v-show="insertShow">
      <div class="jq-insert-panel" v-if="insertShow">
        <div class="title">推送录入</div>
        <div class="content">
          <common-Form
            :fieldsList="insertfieldsList"
            :hideTable="true"
            :hidePagination="true"
            ref="insertForm"
            @change="insertChange"
          >
            <template v-slot:formBtn>
              <div style="text-align: right;width: 100%;">
                <el-button type="danger" size="mini" @click.stop="clearForm">清空</el-button>
                <el-button type="primary" size="mini" @click.stop="submitForm">提交</el-button>
              </div>
            </template>
          </common-Form>
        </div>
      </div>
    </div>
    <div class="feedback-right" ref="fr">
      <div class="right-table-panel">
        <div class="user-info">
          <div class="user-item" v-if="usrInfo.username">
            <img :src="require('@/assets/img/feedback/user.png')" alt="">&nbsp;&nbsp;{{ usrInfo.username }}
          </div>
          <div class="user-item" @click="logout">
            <img :src="require('@/assets/img/feedback/tuichu.png')" alt="">&nbsp;&nbsp;退出
          </div>
        </div>
        <common-Form
          :fieldsList="dialogfieldsList"
          :tableHead="firstTableHead"
          :tableUrl="'/api/v1/getDetailTableFirst'"
          ref="track_tableForm"
          :isExpand="true"
          @change="rightChange"
        >
          <template v-slot:expand>
            <div ref="expandWrap" style="padding: 0 30px;">
              <el-table
                :data="childTableData"
                style="width: 100%">
                <el-table-column
                  prop="modelName"
                  label="场景名称"
                >
                </el-table-column>
                <el-table-column
                  prop="content"
                  label="场景逻辑">
                </el-table-column>
                <el-table-column
                  prop="pushNum"
                  label="推送数量"
                  width="100">
                </el-table-column>
                <el-table-column
                  prop="department"
                  label="推送部门">
                </el-table-column>
                <el-table-column
                  prop="pushTime"
                  label="推送时间"
                  width="200">
                </el-table-column>
<!--                <el-table-column-->
<!--                  prop="username"-->
<!--                  label="填写人"-->
<!--                  width="150">-->
<!--                </el-table-column>-->
                <el-table-column
                  prop="file"
                  label="附件"
                  width="150">
                  <template slot-scope="scope" >
                    <div>
                      <span v-if="scope.row.fileName" class="table-btn" @click="downloadFile(scope.row)"><i class="el-icon-paperclip" style="color: #3DDDFF;margin-right: 5px"></i>下载附件</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="yycx"
                  label="成效"
                  width="350"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                  prop="edit"
                  label="操作"
                  width="120">
                  <template slot-scope="scope">
                    <div style="">
                      <span class="table-btn"  style="color: #3DE11D;font-size: 20px;margin-right: 10px" @click="editChildTable(scope.row)" title="修改"><i class="el-icon-edit-outline"></i></span>
                      <i class="el-icon-delete-solid" title="删除" style="color: #EB1316;cursor:pointer;font-size: 20px" @click="childDel(scope.row)"></i>
<!--/*                      <span class="table-btn" style="color: #EB1316" @click="childDel(scope.row)">删除</span>*/-->
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="height: 10px;"></div>
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="currentChange"
                :total="pagePagination.pageTotal">
              </el-pagination>

            </div>
          </template>
          <template v-slot:expandbtn="scope">
            <div>
              <i class="el-icon-circle-plus-outline" @click="expandHandle(scope.scope.row)" style="cursor: pointer" title="展开"></i>
<!--              <el-button type="primary" size="mini" @click="expandHandle(scope.scope.row)">展开</el-button>-->
            </div>
          </template>
          <template v-slot:formBtn>
            <div>
              <el-button type="primary" @click.stop="tableSearch">搜索</el-button>
            </div>
          </template>
          <template v-slot:file="scope" >
            <div>
              <span v-if="scope.scope.row.fileName" class="table-btn" @click="downloadFile(scope.scope.row)"><i class="el-icon-paperclip" style="color: #3DDDFF;margin-right: 5px"></i>下载附件</span>
            </div>
          </template>
          <template v-slot:edit="scope" >
            <div>
              <span class="table-btn"  style="color: #3DE11D;font-size: 20px" @click="editFirstTable(scope.scope.row)"><i class="el-icon-edit-outline"></i></span>
            </div>
          </template>
        </common-Form>
      </div>
      <common-Dialog ref="edit_first_table" :customClass="'edit_first_table-dialog'">
        <template v-slot:content>
          <common-Form
            :fieldsList="editDialogfieldsList"
            :hideTable="true"
            :hidePagination="true"
            ref="edit_tableForm"
          >

          </common-Form>
        </template>
        <template v-slot:footer>
          <div style="padding: 10px;">
            <el-button type="primary" @click.stop="editSubmit">保存修改</el-button>
          </div>
        </template>
      </common-Dialog>

    </div>
  </div>
</template>

<script>
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import api from "@/api/common.api";
import _ from 'lodash'

export default {
  components: {commonDialog,commonForm},
  props: {},
  data() {
    return {
      editRow: {},
      editDialogfieldsList: [
        {
          type: 'textArea',
          code: 'yycx',
          rows: 10,
          name: '应用成效',
        },
      ],
      expandRow: {},
      pagePagination: {
        pageSize: 10,
        pageNum: 1,
        pageTotal: 0
      },
      childTableData: [],
      insertfieldsList: [
        {
          type: 'dict',
          code: 'modelName',
          name: '场景名称',
          placeholder: '',
          options: []
        },
        {
          type: 'dict',
          code: 'content',
          name: '场景逻辑',
          placeholder: '',
          // height: 50,
          options: []
        },
        // {
        //   type: 'textArea',
        //   code: 'content',
        //   rows: 10,
        //   name: '推送内容',
        // },
        {
          type: 'file',
          code: 'file',
          name: '上传附件',
        },
        {
          type: 'number',
          code: 'pushNum',
          name: '推送数量',
          value: 1
        },
        {
          type: 'autocomplete',
          code: 'department',
          name: '推送部门',
          placeholder: '',
          url: '/api/v1/getDepartmentDownBox'
        },
        {
          type: 'datetime',
          code: 'pushTime',
          name: '推送时间',
        },

      ],
      dialogfieldsList: [
        {
          type: 'dict',
          code: 'modelName',
          name: '场景名称',
          placeholder: '请选择',
          options: [
          ]
        },
        {
          type: 'dict',
          code: 'content',
          name: '场景逻辑',
          placeholder: '',
          options: []
        },
        {
          type: 'dict',
          code: 'department',
          name: '推送部门',
          placeholder: '请选择',
          options: [
            // {
            //   code: '1',
            //   name: '🍉'
            // },
          ]
        },
        {
          type: 'date',
          code: 'date',
          name: '推送时间',
        },

      ],
      firstTableHead: [
        {
          prop: 'expandbtn',
          label: '',
          width: 40
        },
        {
          prop: 'modelName',
          label: '场景名称',
        },
        {
          prop: 'pushCount',
          label: '推送次数',
          width: 100
        },
        {
          prop: 'pushNum',
          label: '推送数量',
          width: 100
        },
        {
          prop: 'department',
          label: '推送部门',
        },
        {
          prop: 'fzjz',
          label: '负责警组',
          width: 150,
        },
        {
          prop: 'pushTime',
          label: '推送时间',
          width: 200
        },
        {
          prop: 'yycx',
          label: '应用成效',
          width: 350,
          showOverflowTooltip: true
        },
        {
          prop: 'edit',
          label: '编辑',
          width: 100,
        },

      ],
      dialogTableHead: [
        {
          prop: 'modelName',
          label: '场景名称',
        },
        {
          prop: 'content',
          label: '推送内容',
        },
        {
          prop: 'pushNum',
          label: '推送数量',
          width: 100
        },
        {
          prop: 'department',
          label: '推送部门',
        },
        {
          prop: 'pushTime',
          label: '推送时间',
          width: 200
        },
        {
          prop: 'username',
          label: '填写人',
          width: 150
        },
        {
          prop: 'file',
          label: '附件',
          width: 150
        },

      ],
    }
  },
  computed: {
    usrInfo () {
      let info = {}
      if(window.sessionStorage.usr){
        info = JSON.parse(window.sessionStorage.usr)
      }
      return info
    },
    insertShow () {
      return this.usrInfo.type === '1'
    }
  },
  mounted() {
    this.$refs.fr.style.width = `calc(100% - ${this.$refs.fl.getBoundingClientRect().width + 100}px)`
  },
  created () {
    this.getModelNameDownBox()
    this.getDepartmentDownBox()
  },
  watch: {},
  methods: {
    editSubmit () {
      let v = this.$refs.edit_tableForm.form
      let params = {
        modelId: this.editRow.modelId,
        yycx: v.yycx,
      }
      if(this.editRow.id){ //子表格有id字段
        params = {
          id: this.editRow.id,
          feedback: v.yycx,
        }
        api.updateRecordFeedback(params).then(res=>{
          if(res.code === 200){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.$refs.edit_first_table.close()
            this.tableSearch()
          }else{
            this.$message({
              type: 'warning',
              message: res.message
            });
          }
        })

      }else{ //修改父表格
        api.updateMiddleValue(params).then(res=>{
          if(res.code === 200){
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.$refs.edit_first_table.close()
            this.tableSearch()
          }else{
            this.$message({
              type: 'warning',
              message: res.message
            });
          }
        })
      }
    },
    editChildTable (row) {
      this.editRow = _.cloneDeep(row)
      let t = _.find(this.editDialogfieldsList, {code: 'yycx'})
      t.value = row.yycx
      this.$refs.edit_first_table.open({title: '编辑', width: '20%'})
    },
    editFirstTable (row) {
      this.editRow = _.cloneDeep(row)
      let t = _.find(this.editDialogfieldsList, {code: 'yycx'})
      t.value = row.yycx
      this.$refs.edit_first_table.open({title: '编辑', width: '20%'})
    },
    childDel (row) {
      this.$confirm('是否删除此条?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params= {
          id: row.id
        }
        api.removeFeedBackTableData(params).then(res=>{
          if(res.code === 200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.expandHandle(this.expandRow)
          }else{
            this.$message({
              type: 'warning',
              message: res.message
            });
          }

        })
      }).catch(() => {

      });
    },
    rightChange (e) {
      if(e.modelName){//场景名称
        let t = _.find(this.dialogfieldsList, {code: 'modelName'})
        let v = _.find(t.options, {name: e.modelName})
        let params = {
          modelId: v.modelId
        }
        api.getModelContentDownDox(params).then(res=>{
          let t2 = _.find(this.dialogfieldsList, {code: 'content'})
          res.content.forEach(v=>{
            v.code = v.value
            v.name = v.value
          })
          t2.options = res.content
        })
      }
    },
    insertChange (e) {
      let t2 = _.find(this.insertfieldsList, {code: 'content'})
      if(e.modelName){//场景名称
        let t = _.find(this.insertfieldsList, {code: 'modelName'})
        let v = _.find(t.options, {name: e.modelName})
        let params = {
          modelId: v.modelId
        }
        api.getModelContentDownDox(params).then(res=>{
          res.content.forEach(v=>{
            v.code = v.value
            v.name = v.value
          })
          t2.options = res.content
        })
      }else{
        // t2.value = ''
        this.$refs.insertForm.clearForm('content')
        t2.options = []
      }
    },
    currentChange (e) {
      this.pagePagination.pageNum = e
      this.childTableData = []
      let params = {
        pageNum: this.pagePagination.pageNum,
        pageSize: this.pagePagination.pageSize,
        modelName: this.expandRow.modelName
      }
      let rightForm = _.cloneDeep(this.$refs.track_tableForm.form)
      if(rightForm.content){
        params.content = rightForm.content
      }
      if(rightForm.date){
        params.beginTime = rightForm.date[0]
        params.endTime = rightForm.date[1]
      }
      if(rightForm.department){
        params.department = rightForm.department
      }
      api.getFeedbackDetailTable(params).then(res=>{
        this.childTableData = res.content.records
        this.pagePagination.pageTotal = res.content.total
      })
    },
    expandHandle (row) {
      // if(!this.$refs.expandWrap){
        let rowList = this.$refs.track_tableForm.$refs.tableWrap.data
      rowList.forEach(v=>{
        if(!_.isEqual(v, row)){
          this.$refs.track_tableForm.$refs.tableWrap.toggleRowExpansion(v, false)
        }
      })
        this.expandRow = _.cloneDeep(row)
        this.pagePagination.pageNum = 1
        this.pagePagination.pageTotal = 0
        this.childTableData = []
        let params = {
          pageNum: this.pagePagination.pageNum,
          pageSize: this.pagePagination.pageSize,
          modelName: row.modelName
        }
        let rightForm = _.cloneDeep(this.$refs.track_tableForm.form)
        if(rightForm.content){
          params.content = rightForm.content
        }
        if(rightForm.date){
          params.beginTime = rightForm.date[0]
          params.endTime = rightForm.date[1]
        }
        if(rightForm.department){
          params.department = rightForm.department
        }
        api.getFeedbackDetailTable(params).then(res=>{
          this.childTableData = res.content.records
          this.pagePagination.pageTotal = res.content.total
          this.$refs.track_tableForm.$refs.tableWrap.toggleRowExpansion(row)
        })
      // }
    },
    logout () {
      this.$store.commit('logOut')
      this.$router.push({name: 'login'})
    },
    downloadText (filename, text) {
      var pom = document.createElement("a");
      pom.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," + encodeURIComponent(text)
      );
      pom.setAttribute("download", filename);
      if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initEvent("click", true, true);
        pom.dispatchEvent(event);
      } else {
        pom.click();
      }
    },
    downloadFile (row) {
      api.getFileLink({id: row.id}).then(res=>{
        // window.location.href= res.content
        // window.open(res.content)
        var url = res.content;
           // url = 'http://39.99.185.7:8092/tmp/123.txt';
         // console.log(url)
        // this.downloadText('123.txt',url)
        // 创建a标签
        var a = document.createElement('a');
        a.setAttribute('href', url);
        a.setAttribute('download', url.split('/').pop()); //分割路径，取出最后一个元素
        a.setAttribute('target', '_blank');
        a.setAttribute('id', 'DownloadFile');
        // 防止反复添加
        if(document.getElementById('DownloadFile')) {
          document.body.removeChild(document.getElementById('DownloadFile'));
        }
        document.body.appendChild(a);
        a.click();
      })
    },
    getDepartmentDownBox () {
      api.getDepartmentDownBox().then(res=>{
        res.content.forEach(v=>{
          v.code = v.value
          v.name = v.value
        })
        // let t = _.find(this.insertfieldsList, {code: 'department'})
        let t2 = _.find(this.dialogfieldsList, {code: 'department'})
        // t.options = res.content
        t2.options = res.content
      })
    },
    getModelNameDownBox () {
      api.getModelNameDownBox().then(res=>{
        res.content.forEach(v=>{
          v.code = v.value
          v.name = v.value
        })
        let t = _.find(this.insertfieldsList, {code: 'modelName'})
        let t2 = _.find(this.dialogfieldsList, {code: 'modelName'})
        t.options = res.content
        t2.options = res.content
      })
    },
    submitForm () {
      let form = _.cloneDeep(this.$refs.insertForm.form)
      console.log('submitForm', form)
      let judgeKeys = Object.keys(form)
      if(_.find(judgeKeys, 'content')){
        judgeKeys.splice(_.find(judgeKeys, 'content'),1)
      }
      if(_.find(judgeKeys, 'file')){
        judgeKeys.splice(_.find(judgeKeys, 'file'),1)
      }
      if(judgeKeys.length < 4){
        this.$message({
          type: 'warning',
          message: '请填写必填项！'
        });
        return
      }
      form.username = this.usrInfo.username
      api.feedbackDetailupload(form).then(res=>{
        if(res.code === 200){
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$refs.track_tableForm.pagePagination.pageNum = 1
          this.tableSearch()
          this.clearForm()
        }else{
          this.$message({
            type: 'warning',
            message: res.message
          });
        }
      })
    },
    clearForm () {
      this.$refs.insertForm.clearForm()
    },
    tableSearch () {
      this.getModelNameDownBox()
      this.getDepartmentDownBox()
      let params = _.clone(this.$refs.track_tableForm.form)
      this.$refs.track_tableForm.getTableData(params)
    },
    closed () {

    },

  }
}

</script>
<style lang='stylus'>
  .edit_first_table-dialog{
    .common-form-wrap{
      padding: 10px;
    }
    .common-form-item{
      width: 100%;
      .opts-textarea{
        width: 100%!important;
      }
    }
    .form-opts{
      width: 100%;
    }

  }
  .feedback-page-wrap{
    height: 100%;
    background-image: url("../../assets/img/bg/-s-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    //background: #001a4b;
    color: #fff;
    display: flex;
    .feedback-left{
      width: 400px;
      padding: 20px;
      display: flex;
      align-items: center;
      padding-top: 60px;
      .jq-insert-panel{
        width: calc(100% - 60px);
        height: calc(100% - 60px);
        max-height: 800px;
        background-image: url("../../assets/img/bg/bg-c1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 30px;
        .title{
          color: #3DABFF;
          font-size: 22px;
          margin-bottom: 20px;
        }
      }
    }
    .feedback-right{
      display: flex;
      align-items: center;
      padding: 20px;
      padding-top: 60px;
      .right-table-panel{
        position: relative;
        width: 100%;
        height: 100%;
        max-height: 800px;
        padding: 30px;
        background-image: url("../../assets/img/bg/bg-c2.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .user-info{
          position: absolute;
          top: -50px;
          right: 40px;
          display: flex;
          align-items: center;
          .user-item{
            display: flex;
            align-items: center;
            cursor: pointer;
            &+.user-item{
              margin-left: 20px;
            }
          }
        }
        .common-form-wrap{
          width: 100%;
        }

      }
    }
  }
</style>
